<template>
	<view class="content">
		<!-- 首页组件 -->
		<home v-if="bottomNavValue==1" />
		<!-- 逛一逛组件 -->
		<Gg v-if="bottomNavValue==2" />
		<!-- 我的-组件 -->
		<account v-if="bottomNavValue==5"/>
		
		<!-- 底部导航栏 -->
		<!-- <view class="btnNav"> -->
			<u-tabbar :value="bottomNavValue" @change="bottomNavChange" :fixed="true" :safeAreaInsetBottom="true">
				<u-tabbar-item text="首页" name="1" icon="home"></u-tabbar-item>
				<u-tabbar-item text="逛一逛" name="2" icon="tags"></u-tabbar-item>
				<u-tabbar-item text="卖二手" name="3" icon="plus-circle-fill"></u-tabbar-item>
				<u-tabbar-item text="消息" name="4" icon="chat"></u-tabbar-item>
				<u-tabbar-item text="我的" name="5" icon="account"></u-tabbar-item>
			</u-tabbar>
		<!-- </view> -->
		
	</view>
</template>


<script>
	import account from '@/pages/index/account'; // 导入用户组件页面
	import home from '@/pages/index/home'; // 首页组件页面
	import Gg from '@/pages/index/gg'; // 逛一逛组件页面
	export default {
		components:{account,home,Gg},
		data() {
			return {
				// 搜索框的数据
				searchData:null,
				// 底部导航栏选中的按钮
				bottomNavValue:"2"
			}
		},
		onLoad() {

		},
		methods: {
			bottomNavChange(data){
				this.bottomNavValue = data;
			}
		}
	}
</script>

<!--scoped: 局部作用域，只会对当前组件生效
    不写scoped属性，代表样式在其他组件中也会出现效果
 -->
<style scoped>

.btnNav{
	width: 100vw;
	height: 150upx;
}
</style>
